<template>
  <s-page custom-class="Picker-Page">
    <view class="container">
      <c-demo-block title="单列选择">
        <s-button block @click="singlePickerVisible = true">{{ singleText }}</s-button>
      </c-demo-block>

      <c-demo-block title="多列选择">
        <s-button block @click="multiPickerVisible = true">{{ multiText }}</s-button>
      </c-demo-block>

      <c-demo-block title="级联选择">
        <s-button block @click="addressPickerVisible = true">{{ addressText }}</s-button>
      </c-demo-block>
    </view>

    <!-- 单列选择 -->
    <s-picker
      v-model="singleValue"
      :visible.sync="singlePickerVisible"
      :columns="singleColumns"
      :text.sync="singleText"
      @confirm="onSinglePickerConfirm"
    />

    <!-- 多列选择 -->
    <s-picker
      v-model="multiValue"
      :visible.sync="multiPickerVisible"
      title="多列选择"
      multiple
      :columns="multiColumns"
      :text.sync="multiText"
      @confirm="onMultiPickerConfirm"
    />

    <!-- 级联选择 -->
    <s-picker
      v-model="addressValue"
      :visible.sync="addressPickerVisible"
      title="地址选择"
      :columns="addressColumns"
      multiple
      :text.sync="addressText"
      @change="onAddressPickerChange"
      @confirm="onAddressPickerConfirm"
    />
  </s-page>
</template>

<script>
import cityJson from './city';

const provinceJson = cityJson[1];

export default {
  data: () => ({
    // 单列选择
    singleColumns: provinceJson,
    singleValue: 140000,
    singleText: '请选择',
    singlePickerVisible: false,

    // 多列选择
    multiColumns: [
      ['今天', '明天', '后天'],
      ['上午', '下午', '晚上'],
    ],
    multiValue: [],
    multiText: '请选择',
    multiPickerVisible: false,

    // 级联选择
    addressColumns: [provinceJson, [], []],
    addressValue: ['140000', '141100', '141124'],
    addressText: '省-市-区',
    addressPickerVisible: false,
  }),
  methods: {
    onAddressPickerChange({ i, setData, value }) {
      if (i < 2) {
        setData(i + 1, cityJson[value]);
      }
    },
    onSinglePickerConfirm(obj) {
      console.log('单列选择确认:', obj);
    },
    onMultiPickerConfirm(obj) {
      console.log('多列选择确认:', obj);
    },
    onAddressPickerConfirm(obj) {
      console.log('地址选择确认:', obj);
    },
  },
};
</script>

<style lang="scss">
.Picker-Page {
  padding: 0 $padding-md;
  ::v-deep {
    .c-demo-block {
      .s-button:nth-child(2) {
        margin-top: 20rpx;
      }
    }
  }
}
</style>
